<template>
  <div class="diy">
    <div class="menu">
      <div class="item" v-for="item in menus" @click="pushMenus(item)" :key="item.customType">
        {{ item.name }}
      </div>
    </div>

    <VueDraggable ref="el2" group="people" class="list" :animation="150" ghostClass="ghost" v-model="list"
      @update="onUpdate" @add="onAdd" @remove="remove">
      <n-form label-placement="left" label-width="100px" v-for="(item, index) in list" :key="item.customType">
        <n-collapse arrow-placement="right">
          <n-collapse-item :title="item.name || item.customType">
            <n-form-item label="宽度">
              <n-input-number :max="750" :min="1" v-model:value="item.width" />
            </n-form-item>

            <n-form-item label="高度">
              <n-input-number :max="1000" :min="1" v-model:value="item.height" />
            </n-form-item>

            <n-form-item label="圆角">
              <n-input-number :max="100" :min="0" v-model:value="item.borderRadius" />
            </n-form-item>

            <n-form-item label="背景色" v-if="item.backgroundColor">
              <n-color-picker v-model:value="item.backgroundColor" />
            </n-form-item>

            <n-form-item label="内边距" v-if="item.padding">
              <n-input v-model:value="item.padding" />
            </n-form-item>

            <n-form-item label="字体颜色" v-if="item.color">
              <n-color-picker v-model:value="item.color" />
            </n-form-item>
          </n-collapse-item>
        </n-collapse>
      </n-form>
    </VueDraggable>

    <div class="frame">
      <iframe :src="iframeUrl" ref="frame"></iframe>
      <n-button @click="save" type="primary">保存</n-button>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import request from "../utils/request";
import { VueDraggable } from "vue-draggable-plus";

const el2 = ref(null);
const frame = ref(null);

const iframeUrl = import.meta.env.VITE_IFRAME_URL;

const menus = ref([
  {
    name: "搜索框",
    customType: "search",
    height: 100,
    width: 750,
    borderRadius: 0,
    backgroundColor: "transparent",
  },
  {
    name: "轮播图",
    customType: "swiper",
    height: 260,
    width: 690,
    borderRadius: 12,
    backgroundColor: "transparent",
    padding: 0,
  },
  {
    name: "分类",
    customType: "category",
    height: 330,
    width: 710,
    borderRadius: 24,
    padding: "`30rpx`",
    display: "flex",
    flexFlow: "row wrap",
    justifyContent: "flex-start",
    alignItems: "flex-start",
    color: "#333",
    backgroundColor: "#fff",
  },
  {
    name: "分区面板",
    customType: "panel",
    width: 710,
    height: 750,
    borderRadius: 24,
    padding: "12rpx",
    display: "grid",
    justifyContent: "flex-start",
    alignItems: "flex-start",
    color: "#333",
    backgroundColor: "#fff",
  },
  {
    name: "推荐商品",
    customType: "recommonds",
    height: 1000,
    width: 750,
    borderRadius: "0",
    padding: "20rpx",
    display: "flex",
    flexFlow: "row wrap",
    justifyContent: "flex-start",
    alignItems: "flex-start",
    color: "#333",
    backgroundColor: "transparent",
  },
  {
    name: "公告",
    customType: "notice",
    height: 100,
    width: 710,
    borderRadius: 24,
    padding: "0 12rpx",
    color: "#333",
    backgroundColor: "#fff",
  },
  {
    name: "广告图",
    customType: "banner",
    height: 200,
    width: 710,
    borderRadius: 24,
    padding: "0rpx",
    display: "flex",
    flexFlow: "row wrap",
    justifyContent: "flex-start",
    alignItems: "flex-start",
    color: "#333",
    backgroundColor: "transparent",
  },
]);

const list = ref([]);
const data = ref(null)

const initData = async () => {
  let res = await request({ url: "/api/diy/list" });
  if (res.code == 200) {
    console.log(res.data)
    data.value = res.data[0]
    list.value = JSON.parse(res.data[0].htmlJson);
    // list.value = [];
  }
};

function onUpdate() { }
function onAdd() { }
function remove() { }

const pushMenus = (item) => {
  let has = false;
  list.value.map((listItem) => {
    if (listItem.customType == item.customType) {
      has = true;
    }
  });

  if (!has) {
    list.value.push(item);
  } else {
    alert("已存在");
  }
};

const save = async () => {
  console.log(JSON.stringify(list.value));
  let htmlJson = JSON.stringify(list.value)
  let res = await request({
    url: "/api/diy/edit",
    method: "post",
    data: { id: 1, htmlJson },
  });

  if (res.code == 200) {
    console.log("res", res);
    alert(res.msg)
  }
};

watch(
  () => list.value,
  (newValue) => {
    frame.value.contentWindow.postMessage(JSON.stringify(newValue), "*");
  },
  { deep: true }
);

onMounted(() => {
  initData();
});
</script>
<style lang="scss" scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.diy {
  min-width: 1000px;
  min-height: 900px;

  display: grid;
  grid-template-columns: 280px 385px 385px;
  gap: 20px;

  box-sizing: border-box;
  padding: 12px;

  background-color: #f1f1f1;

  .menu {
    background-color: #fff;

    display: grid;
    grid-template-columns: 120px 120px;
    justify-content: flex-start;
    align-content: flex-start;
    box-sizing: border-box;

    padding: 12px;
    gap: 12px;
  }

  .item {
    background-color: #f7f7f7;
    color: #333;
    line-height: 30px;
    min-height: 30px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    margin-top: 12px;
  }

  .line {
    line-height: 30px;
    min-height: 30px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    margin-top: 12px;

    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  }

  .list {
    background-color: #fff;
    box-sizing: border-box;
    padding: 12px;
    overflow-y: auto;
  }

  .frame {
    background-color: #fff;
    scrollbar-width: none;
    -ms-overflow-style: none;

    box-sizing: border-box;
    padding: 12px 0;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    iframe {
      width: 380px;
      height: 800px;
      border: none;
      outline: none;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    frame::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }
  }

  .frame::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
}
</style>
